<!DOCTYPE html>
<html lang="en">
<head>
    {% load static %}
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>codemirror示例</title>
    <link rel="stylesheet" href="{% static 'layui.css' %}">
    <link rel="stylesheet" href="{% static 'codemirror/lib/codemirror.css' %}">
    <link rel="stylesheet" href="{% static 'codemirror/addon/fold/foldgutter.css' %}">
    <link rel="stylesheet" href="{% static 'codemirror/addon/hint/show-hint.css' %}">
    <link rel="stylesheet" href="{% static 'codemirror/addon/lint/lint.css' %}">
    <link rel="stylesheet" href="{% static 'codemirror/addon/lint/lint.css' %}">
    <link rel="stylesheet" href="{% static 'codemirror/theme/darcula.css' %}">
    <style>
        .CodeMirror {
            height: 600px; /* 设置你想要的高度 */

        {#/* 或者使用 min-height 来允许内容撑开 */#}{#/* min-height: 200px; */#}
        }

        .layui-form-item {
            padding: 10px;
            margin: 0px;

        }
    </style>
</head>
<body>


<div class="layui-form" lay-filter="form-demo-submit">
    <div class="layui-field-box">

        <div class="layui-form-item">
            <div class="layui-row layui-col-space16">
                <div class="layui-col-md4">
                    <div class="layui-input-wrap">
                        <div class="layui-input-prefix">
                            <i class="layui-icon layui-icon-username"></i>
                        </div>
                        <input type="text" name="script_name" readonly  placeholder="脚本名称" class="layui-input "
                               lay-verify="required">
                    </div>
                </div>
                <div class="layui-col-md4">
                    <div class="layui-input-wrap">
                        <div class="layui-input-prefix">
                            <i class="layui-icon layui-icon-about"></i>
                        </div>
                        <input type="text" name="describe" readonly  placeholder="描述" class="layui-input">

                    </div>
                </div>


            </div>

            <div class="layui-row" style="padding-top: 15px" ;>
                <textarea id="editor" cols="30" rows="50"></textarea>
            </div>

        </div>
    </div>

</div>
</body>
<script src="{% static 'layui.js' %}"></script>

<script src="{% static 'jquery-3.6.0.min.js' %}"></script>
<script src="{% static 'codemirror/lib/codemirror.js' %}"></script>
<script src="{% static 'codemirror/addon/comment/comment.js' %}"></script>
<script src="{% static 'codemirror/addon/selection/active-line.js' %}"></script>
<script src="{% static 'codemirror/addon/hint/show-hint.js' %}"></script>
<script src="{% static 'codemirror/addon/fold/foldcode.js' %}"></script>
<script src="{% static 'codemirror/addon/fold/brace-fold.js' %}"></script>
<script src="{% static 'codemirror/addon/fold/indent-fold.js' %}"></script>
<script src="{% static 'codemirror/addon/fold/comment-fold.js' %}"></script>
<script src="{% static 'codemirror/addon/edit/closebrackets.js' %}"></script>
<script src="{% static 'codemirror/addon/edit/matchbrackets.js' %}"></script>
<script src="{% static 'codemirror/mode/yaml/yaml.js' %}"></script>
<script src="{% static 'codemirror/mode/javascript/javascript.js' %}"></script>
<script src="{% static 'codemirror/keymap/sublime.js' %}"></script>
<script>
    let myCodeMirror;
    let pendingContent = null;

    window.onload = function editor(event) {
        var el = document.getElementById("editor");
        myCodeMirror = CodeMirror.fromTextArea(el, {
            mode: "yaml", // 语言模式
            theme: "darcula", // 主题
            readOnly: true,
            // theme: "default", // 主题
            keyMap: "sublime", // 快键键风格
            lineNumbers: true, // 显示行号
            smartIndent: true, // 智能缩进
            indentUnit: 4, // 智能缩进单位为4个空格长度
            indentWithTabs: true, // 使用制表符进行智能缩进
            lineWrapping: true, //
            // 在行槽中添加行号显示器、折叠器、语法检测器
            gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter", "CodeMirror-lint-markers"],
            foldGutter: true, // 启用行槽中的代码折叠
            autofocus: true, // 自动聚焦
            matchBrackets: true, // 匹配结束符号，比如"]、}"
            autoCloseBrackets: true, // 自动闭合符号
            styleActiveLine: true, // 显示选中行的样式
        });


    };
    let playbookContent = "";
    playbookId = {{ playbook_id }}

    $.get(`/scripts/api/playbook/${playbookId}/`, function (res) {
        if (res.code === 0) {

            const content = res.data.content;  // 获取 YAML 内容
            const name = res.data.name;
            const description = res.data.description;
            playbookContent = res.data.content;

            // 初始化或填充数据到 CodeMirror
            if (myCodeMirror) {
                myCodeMirror.setValue(playbookContent);  // 设置内容
            } else {
                // 否则暂存起来，等编辑器初始化完成后设置
                pendingContent = content;
            }
            $('input[name="script_name"]').val(name);
             {#$('#description').val(description);#}
            $('input[name="describe"]').val(description);


        } else {
            alert('加载失败：' + res.message);
        }
    }).fail(function () {
        alert('网络请求失败');
    });

</script>
</html>